<template>
  <el-container>
    <el-aside :width="asideWidth">
      <div class="logo">
        <el-image style="width: 30px; height: 30px" :src="url" />
        <h4 v-show="isShowTitle">商品管理系统</h4>
      </div>
      <p class="home-title">首页</p>

      <!-- 菜单 -->
      <Menu :collapse="collapse"></Menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-icon :size="30" @click="onFlod">
          <component :is="headerLeft"></component>
        </el-icon>
        <div>
          <span class="title">欢迎您 {{ user.nick }}</span>
          <el-dropdown trigger="click">
            <el-avatar shape="square" :size="30" :src="user.headerimg" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item @click="onLogout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { Fold, Location, Expand } from "@element-plus/icons-vue";
import Menu from "@/components/menu.vue";
export default {
  components: {
    Fold,
    Expand,
    Location,
    Menu,
  },
  data() {
    return {
      url: "src/assets/logo.jpeg",
      user: {},
      asideWidth: "200px",
      collapse: true,
      headerLeft: "Fold",
      isShowTitle: true,
    };
  },
  methods: {
    onLogout() {
      localStorage.removeItem("TOKEN");
      this.$store.dispatch("user/clearUser");
      this.$router.replace({ path: "/" });
    },
    onFlod() {
      this.collapse = !this.collapse;
      this.asideWidth = this.collapse ? "200px" : "70px";
      this.headerLeft = this.collapse ? "Fold" : "Expand";
      this.isShowTitle = this.collapse;
    },
  },
  created() {
    this.user = this.$store.getters["user/user"];
  },
};
</script>
<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100vh;
  .el-aside {
    background-color: #2d3436;
    transition: 0.3s;
    .logo {
      display: flex;
      color: white;
      padding: 2px 20px;
      align-items: center;
      height: 50px;
      h4 {
        margin-left: 10px;
      }
    }
    .home-title {
      padding-left: 20px;
      color: rgb(212, 212, 9);
    }
    .el-menu {
      border-right: 0;
    }
  }
  .el-container {
    .el-header {
      background-color: #7f8fa6;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        margin-right: 5px;
      }
    }
  }
}
</style>
